<!-- 注册页面 -->
<template>
  <div>
    <RegisterNavBar class="register-nav"></RegisterNavBar>
    <van-form
      validate-first
      class="van-form"
      label-align="right"
      v-model="registerForm"
      @submit="register(registerForm)"
    >
      <van-field v-model="registerForm.phone" name="phone" label="手机号" :rules="phoneRules" />
      <!-- <van-field
        v-model="registerForm.pass"
        name="pass"
        label="密码"
        :rules="passRules"
        type="password"
      />
      <van-field
        v-model="registerForm.checkpass"
        name="checkpass"
        label="确定密码"
        :rules="checkpassRules"
        type="password"
      /> -->
      <van-field
        v-model="registerForm.code"
        center
        clearable
        label="验证码"
        name="code"
        placeholder="请输入短信验证码"
        :rules="codeRules"
      >
        <van-button
          slot="button"
          size="small"
          type="primary"
          :disabled="disabling"
          @click="verification()"
        >
          {{codetexts}}
          <span v-show="showS">s</span>
        </van-button>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">注册</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import RegisterNavBar from "./component/RegisterNavBar";
export default {
  data() {
    this.phoneRules = [
      { required: true, message: "请输入手机号" },
      { validator: this.phonenumber, message: "手机号格式错误" }
    ];
    this.passRules = [{ required: true, message: "请输入密码" }];
    this.checkpassRules = [{ required: true, message: "请重新输入密码" }];
    this.codeRules = [{ required: true, message: "请输入验证码" }];

    return {
      disabling: false,
      disabled: false,
      showS: 0, // s 时候显示
      codetexts: "发送验证码",
      registerForm: {
        phone: "",
        pass: "",
        checkPass: "",
        code: ""
      }
    };
  },
  methods: {
    phonenumber(val) {
      return /1\d{10}/.test(val);
    },
    //短信验证
    async verification() {
      console.log("点击获取验证码");
      let phone = parseInt(this.registerForm.phone);
      console.log(phone);
      try {
        await this.$http({
          method: "post",
          url: "index/common/sendMsg",
          headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
          data: {
            phone,
            code: `SMS_143540005`
          }
        })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            console.log(err);
          });
      } catch (error) {
        console.log("个人注册的短信验证出现问题...");
      }
      this.codetexts = 60;
      this.showS = true;
      this.disabling = true;
      let timer = setInterval(() => {
        this.codetexts = this.codetexts - 1;
        if (this.codetexts == 0) {
          clearInterval(timer);
          this.codetexts = "重新发送";
          this.showS = false;
          this.disabling = false;
        }
      }, 1000);
    },
    //点击注册
    async register(registerForm) {
      let phone = this.registerForm.phone;
      let smscode = this.registerForm.code;
      console.log(phone, smscode);
      await this.$http({
        method: "post",
        url: "index/register/regist",
        headers: { "X-Requested-With": "XMLHttpRequest" }, // 必须加这个请求头 否则报错：500
        data: {
          phone,
          smscode
        }
      })
        .then(res => {
          let _data = res.data;
          console.log(res);
          if (_data.State.Code == 200) {
            this.disabled = false;
            this.$Notify({ type: "success", message: "注册成功" });
            this.$router.push("/login");
          } else if (_data.State.Code == 1200) {
            this.$Notify({
              type: "success",
              message: "手机号已被注册为个人用户，请登录"
            });
            this.$router.push("/login");
          } else if (_data.State.Code == 1600) {
            this.$Notify({ type: "error", message: "验证码过期" });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },

  components: {
    RegisterNavBar
  }
};
</script>
<style lang='scss' scoped>
.van-form {
  margin-top: 4rem;
}
</style>